<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Cassie"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
  <meta name="keywords" content=""/>
  <title>Form</title>
  <link rel="stylesheet" href="./css/form.css"/>
  <!-- link bootstrap -->
  <link rel="stylesheet" href="./css/bootstrap.min.css"/>
  
   
  
 </head>
 <body>
     <div class="container">
        <div class="col-md-offset-2 col-md-7">
            <h2>用户注册页面</h2>
            <form action="myPhp.php" class="form-horizontal" id="myForm" method="post" >
                <div class="form-group">
                    <label for="myName" class="col-md-2 control-label">用户名：</label>
                    <div class="col-md-6">
                        <input type="username" class="form-control" id="myName" name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="myPassword" class="col-md-2 control-label">密码：</label>
                    <div class="col-md-6">
                        <input type="password" class="form-control" id="myPassword" name="password">
                    </div>
                </div>
                <div class="form-group" >
                    <label class="col-md-2 control-label">性别：</label>
                    <div class="col-md-10" id="sexy">
                        <div class="radio-inline">
                            <label>
                                <input type="radio"  name="gender" id="myOption1"  data-bv-field="gender">
                                男
                            </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                                <input type="radio"  name="gender" id="myOption2"  data-bv-field="gender">
                                女
                            </label>
                        </div>
                        
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">爱好：</label>
                    <div class="col-md-10" id="habbit">
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox1" value="option1" name="languages">听音乐
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2" value="option2" name="languages">看电影
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3" value="option3" name="languages" >玩游戏
                        </label>
                        <div class="radio-inline">
                            <input type="button" value="全选" name="all">
                        </div>
                        <div class="radio-inline">
                            <input type="button" value="取消" name="cancel">
                        </div>
                        <div class="radio-inline">
                            <input type="button" value="反选" name="back">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">城市：</label>
                    <div class="col-md-3" >
                        <select class="form-control degree" name="country" >
                            <option value="null">请选择</option>
                            <option value="beijing">北京</option>
                            <option value="shanghai">上海</option>
                            <option value="guangzhou">广州</option>
                        </select>
                    </div>
                </div>    
                <div class="form-group">
                    <label for="myFile" class="col-md-2 control-label">照片：</label>
                    <div class="col-md-10">
                        <input type="file" id="myFile" name="firstFile">
                    </div>
                </div>
                <div class="form-group">
                    <label for="myFile" class="col-md-2 control-label">个人简介：</label>
                    <div class="col-md-10">
                        <textarea class="form-control" rows="3" name="bio"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" name="sub">提交</button>
                    </div>
                </div>
            </form>
        </div>
     </div>
     <script src="./js/bootstrap.min.js"></script>
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 </body>
 </html>

 <script>
var theForm=document.getElementById("myForm");
var username=theForm.elements["username"];
var password=theForm.elements["password"];
var gender=theForm.elements["gender"];
var gender=theForm.elements["gender"];
var country=theForm.elements["country"];
var sub=theForm.elements["sub"];
var languages=theForm.elements["languages"];
var all=theForm.elements["all"];
var cancel=theForm.elements["cancel"];
var back=theForm.elements["back"];
 
username.onblur=function(){
    
    
    
    if(username.value.match(/[^(a-zA-Z0-9_\.)]/)!=null){
        alert("用户名只能是字母数字下划线！")
    }
    if(username.value.length<6 || username.value.length>10){
        alert("用户名长度为6到10")
        return false;
    }
}

password.onblur=function(){
    
    if(password.value.match(/[^(a-zA-Z0-9_\.)]/)!=null){
        alert("密码只能是字母数字下划线！")
    }
    if(password.value.length<6 || password.value.length>10){
        alert("密码长度为6到10")
        return false;
    }
}

country.onblur=function(){
    
    if(country.value=="null"){
        alert('请选择城市');
    }
    
}
console.log(username.value);
sub.onclick=function(){
    
    
    if(username.value.length==0){
        alert("请输入用户名")
        return false;
    }
    if(username.value.length<6 || username.value.length>10){
        alert("用户名长度为6到10")
        return false;
    }
    if(username.value.match(/[^(a-zA-Z0-9_\.)]/)!=null){
        alert("用户名只能是字母数字下划线！")
    }
    
    if(password.value.length==0){
        alert("请输入密码")
        return false;
    }
    if(password.value.length<6 || password.value.length>10){
        alert("密码长度为6到10")
        return false;
    }
    if(password.value.match(/[^(a-zA-Z0-9_\.)]/)!=null){
        alert("密码只能是字母数字下划线！")
        return false;
    }
    
    if(gender[0].checked==false&&gender[1].checked==false){
        alert("请选择性别")
        return false;
    }
    if(languages[0].checked==false && languages[1].checked==false && languages[2].checked==false)
    {
        alert("请选择爱好")
        return false;
    }
}


all.onclick=function(){
    for(var i=0;i<languages.length;i++){
        languages[i].checked="checked";
    }
}
cancel.onclick=function(){
    for(var i=0;i<languages.length;i++){
        languages[i].checked="";
    }
}
back.onclick=function(){
    for(var i=0;i<languages.length;i++){
        languages[i].checked=!languages[i].checked;
    }
}


 </script>